<template>
    <Modal :mask-closable="false" v-model="visible" :title="title">
        <Form ref="form" v-if="visible" class="formList" :model="form" label-position="top" :rules="rules">

            <FormItem label="产品名称" required prop="productName">
                <Input type="text" v-model="form.productName" placeholder="请输入产品名称" class="inputBorder"></Input>
            </FormItem>
            <FormItem label="产品编码" required prop="productCode">
                <Input type="text" v-model="form.productCode" placeholder="请输入产品编码" class="inputBorder"></Input>
            </FormItem>
            <FormItem label="成品物料" required prop="materialId">
                <Select v-model="form.materialId" placeholder="请输入成品物料`">
                    <Option v-for="(item, index) in materialList" :key="index.id" :value="item.id"
                        :label="item.materialName"></Option>
                </Select>

            </FormItem>
            <FormItem label="产品类别" required prop="category">
                <Input type="text" v-model="form.category" placeholder="请输入产品类别" class="inputBorder"></Input>
            </FormItem>

        </Form>
        <div slot="footer" v-if="visible">
            <Button type="default" @click="closeModal">取消</Button>
            <Button type="primary" @click="handleSubmit('form')">确定</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "CreateOrUpdateModal",
    props: {
        visible: Boolean,
        form: Object,
        title: String,
        handleAddSubmit: Function,
        materialList: Array,
    },
    data() {
        return {
            rules: {
                productName: [
                    { required: true, message: '请输入产品名称', trigger: 'blur' }
                ],
                productCode: [
                    { required: true, message: '请输入产品编码', trigger: 'blur' }
                ],
                materialId: [
                    { required: true, message: '请选择物料', trigger: 'blur' }
                ], category: [
                    { required: true, message: '请选择产品类别', trigger: 'blur' }
                ],
            },
        };
    },
    methods: {
        closeModal() {
            this.$emit("update:visible", false);
        },
        handleSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.handleAddSubmit(formName);
                }
            })

        },
    },
};
</script>

<style scoped>
.formList {}
</style>